import { Tooltip, Input, Avatar, Select, Dropdown, Menu, Divider, Message, Button } from '@arco-design/web-react'
import { IconLanguage, IconNotification, IconSunFill, IconMoonFill, IconUser, IconSettings, IconPoweroff, IconExperiment, IconDashboard, IconInteraction, IconTag } from '@arco-design/web-react/icon'
import Logo from '@/assets/logo.svg'
import styles from './style/index.module.less'
import useLocale from '@/hooks/useLocale'
import locale from '@/locale'
import { useAppSelector } from '@/hooks/useStore'
import { memo, useContext } from 'react'
import { GlobalContext } from '@/utils/context'
import defaultLocale from '@/locale'
import Setting from '../Setting'
const Navbar = () => {
  const t = useLocale(locale)
  const { theme, lang, setLang, setTheme } = useContext(GlobalContext)
  const userInfo = useAppSelector((state) => state.user)
  const role = userInfo.roles.role
  function logout() {
    console.log('%c [ logout ]-34', 'font-size:13px; background:#e494fd; color:#ffd8ff;', 'logout')
  }

  function onMenuItemClick(key: string) {
    if (key === 'logout') {
      logout()
    } else {
      Message.info(`You clicked ${key}`)
    }
  }

  const handleChangeRole = () => {}

  const droplist = (
    <Menu onClickMenuItem={onMenuItemClick}>
      <Menu.SubMenu
        key="role"
        title={
          <>
            <IconUser className={styles['dropdown-icon']} />
            <span className={styles['user-role']}>{role === 'admin' ? t['menu.user.role.admin'] : t['menu.user.role.user']}</span>
          </>
        }
      >
        <Menu.Item onClick={handleChangeRole} key="switch role">
          <IconTag className={styles['dropdown-icon']} />
          {t['menu.user.switchRoles']}
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.Item key="setting">
        <IconSettings className={styles['dropdown-icon']} />
        {t['menu.user.setting']}
      </Menu.Item>
      <Menu.SubMenu
        key="more"
        title={
          <div style={{ width: 80 }}>
            <IconExperiment className={styles['dropdown-icon']} />
            {t['message.seeMore']}
          </div>
        }
      >
        <Menu.Item key="workplace">
          <IconDashboard className={styles['dropdown-icon']} />
          {t['menu.dashboard.workplace']}
        </Menu.Item>
        <Menu.Item key="card list">
          <IconInteraction className={styles['dropdown-icon']} />
          {t['menu.list.cardList']}
        </Menu.Item>
      </Menu.SubMenu>

      <Divider style={{ margin: '4px 0' }} />
      <Menu.Item key="logout">
        <IconPoweroff className={styles['dropdown-icon']} />
        {t['navbar.logout']}
      </Menu.Item>
    </Menu>
  )
  return (
    <div className={styles.navbar}>
      <div className={styles.left}>
        <div className={styles.logo}>
          <Logo />
          <div className={styles['logo-name']}>Aadmin Pro</div>
        </div>
      </div>
      <ul className={styles.right}>
        <li>
          <Input.Search className={styles.round} placeholder={t['navbar.search.placeholder']} />
        </li>
        <li>
          <Select
            triggerElement={<Button icon={<IconLanguage />} shape="circle" />}
            options={[
              { label: '中文', value: 'zh-CN' },
              { label: 'English', value: 'en-US' }
            ]}
            value={lang}
            triggerProps={{
              autoAlignPopupWidth: false,
              autoAlignPopupMinWidth: true,
              position: 'br'
            }}
            trigger="hover"
            onChange={(value: 'zh-CN' | 'en-US') => {
              setLang!(value)
              const nextLang = defaultLocale[value]
              Message.info(`${nextLang['message.lang.tips']}${value}`)
            }}
          />
        </li>
        <li>
          <Button icon={<IconNotification />} shape="circle" />
        </li>
        <li>
          <Setting />
        </li>
        <li>
          <Tooltip content={theme === 'light' ? t['settings.navbar.theme.toDark'] : t['settings.navbar.theme.toLight']}>
            <Button icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />} onClick={() => setTheme!(theme === 'light' ? 'dark' : 'light')} shape="circle" />
          </Tooltip>
        </li>
        {userInfo && (
          <li>
            <Dropdown droplist={droplist} position="br">
              <Avatar size={32} style={{ cursor: 'pointer' }}>
                {userInfo.username.slice(0, 4)}
              </Avatar>
            </Dropdown>
          </li>
        )}
      </ul>
    </div>
  )
}

export default memo(Navbar)
